<template>
  <div style="margin-left: 20px;" v-loading="loading">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="$global.hasPermission('setting/get')">
      <el-tab-pane label="配置通知" name="first" >
        <el-form :model="noticeForm" label-width="80px">
          <input type="text" name="a72f8d" autocomplete="off" style="display: none;">
          <input type="password" name="b4e9c1" autocomplete="off"
            style="height: 0px;width: 0px;border: 0px;padding: 0px;">
          <el-form-item label="通知限制">
            <div style="display: flex;">
              <span class="noticeLimit">每分钟最大次数：</span>
              <el-input v-model="noticeForm.min" type="number" clearable placeholder="" style="width: 120px;"></el-input>
              <span class="noticeLimit">每小时最大次数：</span>
              <el-input v-model="noticeForm.hour" type="number" clearable placeholder="" style="width: 120px;"></el-input>
              <span class="noticeLimit">每天最大次数：</span>
              <el-input v-model="noticeForm.day" type="number" clearable placeholder="" style="width: 120px;"></el-input>
            </div>
            <i class="el-icon-info" style="color: #888;"></i>
            <span class="tip">针对每个通知对象(如：每个邮箱)，发送通知的最大次数，避免消息轰炸。</span>
          </el-form-item>
          <el-form-item label="邮箱服务">
            <div style="display: flex;">
              <span class="noticeLimit" style="width: 90px;">服务商地址：</span>
              <el-input v-model="noticeForm.server" placeholder="" style="width: 150px;"></el-input>
              <span class="noticeLimit-short" style="width: 50px;">端口：</span>
              <el-input v-model="noticeForm.port" placeholder="" style="width: 65px;"></el-input>
              <span class="noticeLimit-short" style="width: 80px;">发件邮箱：</span>
              <el-input v-model="noticeForm.address" placeholder="" style="width: 160px;" type="email"></el-input>
              <span class="noticeLimit" style="width: 90px;">邮箱授权码：</span>
              <el-input v-model="noticeForm.authcode" type="password" clearable placeholder=""
                style="width: 190px;"></el-input>
            </div>
            <i class="el-icon-info" style="color: #888;"></i>
            <span class="tip">邮件通知时使用的发送者配置</span>
          </el-form-item>
          <el-form-item label="应用名称">
            <div style="display: flex;">
              <el-input v-model="noticeForm.appName" placeholder="" style="width: 200px;"></el-input>
            </div>
            <i class="el-icon-info" style="color: #888;"></i>
            <span class="tip">如：发送通知时注明来源</span>
          </el-form-item>
          <el-form-item>
            <el-button  type="primary" @click="submit('SettingNotice')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="服务信息" name="second" >
        <el-table :data="services" v-loading="loading">
        <el-table-column property="createTime" label="创建时间" width="150"></el-table-column>
        <el-table-column property="status" label="状态" width="200"></el-table-column>
        <el-table-column property="updateTime" label="最近检测时间"  width="200"></el-table-column>
        <el-table-column property="value" label="信息"></el-table-column>
        <el-table-column property="serverId" label="ServerId" width="150"></el-table-column>
        <el-table-column property="serverKey" label="ServerKey"></el-table-column>
      </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
let that
export default {
  data() {
    return {
      loading: false,
      activeName: 'first',
      noticeForm: {
        min: 3,
        hour: 20,
        day: 100,

        server: '',
        port: '25',
        address: '',
        authcode: '',

        appName: '任务管理'
      },
      services:[],
    }
  },
  created() {
    that = this
    this.getSetting('SettingNotice')
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == 'first') {
        this.getSetting('SettingNotice')
      }
      if (tab.name == 'second') {
        this.getService()
      }
    },
    getSetting(type) {
      let that = this
      this.listLoading = true
      this.$system
        .get('setting/get', { type: type })
        .then((res) => {
          if (res && res.length > 0) {
            if (type == 'SettingNotice') {
              var noticeLimit = res.find(s => s.key == 'noticeLimit').value.split('-')
              that.noticeForm.min = noticeLimit[0]
              that.noticeForm.hour = noticeLimit[1]
              that.noticeForm.day = noticeLimit[2]

              var emailServer = res.find(s => s.key == 'emailServer').value.split('$')
              that.noticeForm.server = emailServer[0]
              that.noticeForm.port = emailServer[1]
              that.noticeForm.address = emailServer[2]
              that.noticeForm.authcode = emailServer[3]

              that.noticeForm.appName = res.find(s => s.key == 'appName')?.value
            }
          }

        })
        .catch()
        .finally(() => {
          this.listLoading = false
        })
    },
    getService() {
      this.loading = true
      this.$system
        .get('setting/getService', { })
        .then((res) => {
          this.services=res
        })
        .catch()
        .finally(() => {
          this.loading = false
        })
    },
    submit(type) {
      this.loading = true
      let saveData = []
      if (type == 'SettingNotice') {
        saveData.push({ key: 'noticeLimit', value: this.getNoticeLimitCombineValue(), type: 'SettingNotice' })
        saveData.push({ key: 'emailServer', value: this.getEmailServerCombineValue(), type: 'SettingNotice' })
        saveData.push({ key: 'appName', value: this.noticeForm.appName, type: 'SettingNotice' })
      }
      this.$system
        .post('setting/save', saveData)
        .then((res) => {
          this.$tip.success()
          this.getSetting(type)
        })
        .catch()
        .finally(() => {
          this.loading = false
        })
    },
    getSplitValue() {

    },
    getNoticeLimitCombineValue() {
      return `${this.noticeForm.min}-${this.noticeForm.hour}-${this.noticeForm.day}`
    },
    getEmailServerCombineValue() {
      return `${this.noticeForm.server}$${this.noticeForm.port}$${this.noticeForm.address}$${this.noticeForm.authcode}`
    },
    btnShowForm(item) {
      that.dialogVisible = true
      that.form = item
    },
    currentChange(val) {
      this.searchData.pageIndex = val
      this.getList()
    },
  },
}
</script>

<style scoped> .noticeLimit {
   width: 112px;
   margin-left: 20px;
 }

 .noticeLimit-short {
   width: 80px;
   margin-left: 15px;
 }

 .tip {
   margin-left: 10px;
   font-size: 12px;
   color: gray;
 }
</style>